<template>
    <a-layout-footer style="text-align: center">
        <div style="width:300px;margin:0 auto; padding:20px 0;">
            小朱电子书<br/>
            <a target="_blank" href="https://beian.miit.gov.cn" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">皖ICP备2022009219号</p></a>
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010702007382" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="image/beian.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">沪公网安备 31010702007382号</p></a>
        </div>
    </a-layout-footer>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue';
import store from "@/store";
import {Tool} from "@/util/tool";
import { notification } from 'ant-design-vue';

export default defineComponent({
    name: 'the-footer',
    setup() {
        // 若一个响应式变量是要根据某个变量的变化而计算得来，可使用computed（动态监听）
        const user = computed(() => store.state.user) ; // 定义一个计算属性（从vuex中获取全局变量）

        let websocket: any;
        let token: any;
        const onOpen = () => {
          console.log('WebSocket连接成功，状态码：', websocket.readyState)
        };
        const onMessage = (event: any) => {
          console.log('WebSocket收到消息：', event.data);
          notification['info']({
            message: '收到消息',
            description: event.data,
          });
        };
        const onError = () => {
          console.log('WebSocket连接错误，状态码：', websocket.readyState)
        };
        const onClose = () => {
          console.log('WebSocket连接关闭，状态码：', websocket.readyState)
        };
        const initWebSocket = () => {
          // 连接成功
          websocket.onopen = onOpen;
          // 收到消息的回调
          websocket.onmessage = onMessage;
          // 连接错误
          websocket.onerror = onError;
          // 连接关闭的回调
          websocket.onclose = onClose;
        };

        onMounted(() => {
            // WebSocket 【页面会加载the-footer组件，页面一打开，就会连接webSocket】（也可以考虑登录之后再执行webSocket连接）
            if ('WebSocket' in window) {
              token = Tool.uuid(12);
              // 这里new的是H5自带的WebSocket
              websocket = new WebSocket(process.env.VUE_APP_WS_SERVER + '/ws/' + token);    // 连接地址：ws://127.0.0.1:8880/ws/xxx

              initWebSocket();  // 初始化websocket各种回调函数

              // websocket.close(); // 关闭
            } else {
              alert('当前浏览器 不支持')
            }
        });

        return {
            user
        };
    },

});
</script>
<style scoped>
a {
    color: #666;
  }
</style>
